<script type="text/x-template" id="listitem-horizontal">
    <div class="listitem-horizontal">
        <vue-horizontal>
            <div v-for="items in itemPages">
                <mediaitem-list-item
                        v-for="(song, index) in items" :show-library-status="showLibraryStatus"
                        v-bind:key="song.id"
                        :parent="'listitem-hr' + simplifiedParent"
                        :index="song.index"
                        :item="song"></mediaitem-list-item>
            </div>
        </vue-horizontal>
    </div>
</script>

<script>
  Vue.component('listitem-horizontal', {
    template: '#listitem-horizontal',
    name: "listitem-horizontal",
    props: {
      items: {
        type: Array,
        required: true
      },
      showLibraryStatus: {
        type: Boolean,
        default: true
      }
    },
    data: function() {
      return {
        itemPages: [],
        simplifiedParent: []
      }
    },
    mounted() {
      // give every item an id
      this.items.forEach(function(item, index) {
        item.id = index;
      });
      // split items into pages
      this.itemPages = app.arrayToChunk(this.items, 4);
      try {
        this.simplifiedParent = JSON.stringify(this.items.map(function(x) {
          return x.attributes.playParams
        }));
        console.debug("simplifiedParent: " + this.simplifiedParent);
      } catch (e) {
      }

    },
    watch: {
      items: function(items) {
        // give every item an id
        this.items.forEach(function(item, index) {
          item.id = index;
        });
        // split items into pages
        this.itemPages = app.arrayToChunk(this.items, 4);
        try {
          this.simplifiedParent = JSON.stringify(this.items.map(function(x) {
            return x.attributes.playParams
          }));
          console.log("simplifiedParent: " + this.simplifiedParent);
        } catch (e) {
        }
      }
    },
    methods: {
      sayHello: function() {
        alert('Hello world!');
      }
    }
  });
</script>
